<template>
	<view class="index">
		<image :src="theme.background_url" mode="" class="bgbanner"></image>
		<u-navbar class="navbars" :is-back="false" title=" " :border-bottom="false" :background="{
				backgroundImage: 'url(' + theme.background_url + ')'
			}">
			<view class="slot-wrap" style="height: 68rpx;line-height: 68rpx;overflow: hidden;">
				<my-transition :value="isfixed" appear name="fade" destroyOnHide :duration="duration">
					<view class="default u-flex u-row-left u-col-center">
						<image :src="theme.logo" mode="" style="width: 66rpx;height: 66rpx;margin-left: 10rpx;"></image>
						<view class="" style=" display:table-cell; vertical-align:bottom;">
							<text class="title u-line-1" :style="{
									color: theme.master_title_colour
								}">
								京推优选
							</text>
							<text class="title_tips  u-line-1" :style="{
									color: theme.salve_title_colour
								}">
								找优品就上京推优选
							</text>
						</view>
					</view>
				</my-transition>
				<my-transition :value="isfixed2" appear name="fade" :duration="duration">
					<view class="default">
						<u-search placeholder="输入商品名或粘贴京东商品标题搜索" v-model="search" :disabled="true" :show-action="false" :border-color="theme.search_colour"
						 :height="54" style="width: 100%;" @click="goNext(1)"></u-search>
					</view>
				</my-transition>
			</view>
		</u-navbar>
		<view class="seek u-flex u-row-between u-col-center">
			<u-search placeholder="输入商品名或粘贴京东商品标题搜索" :disabled="true" :show-action="false" :border-color="theme.search_colour"
			 :height="60" class="u-flex-1" @click="goNext(1)"></u-search>
			<view class="u-text-center u-m-l-10" :style="{
					color: theme.link_colour,
					height: '88rpx',
					lineHeight: '37rpx',
					zIndex: 9
				}"
			 @click="goNext(2)">
				<u-icon name="attach" :size="36" style="margin-top: 10rpx;"></u-icon>
				<view style="z-index: 9">转链</view>
			</view>
		</view>
		<u-sticky bg-color="transparent" :offset-top="navtop" :is-index="true" @fixed="fixed" @unfixed="unfixed">
			<view class="classbox" :style="{
					backgroundImage: 'url(' + theme.background_url + ')'
				}">
				<vgt-tab v-if="tabsList2.length > 1" :list="tabsList2" openListTit="分类选择" :itemStyleDefault="{
						color: theme.class_colour
					}"
				 :itemStyleActive="{
						color: '#FF0303',
						'font-weight': 600,
						border: '2rpx solid #FF0303'
					}"
				 :itemStyleDefaults="{
						color: theme.class_colour
					}" :itemStyleActives="{
						color: theme.class_text_colour,
						'font-weight': 600,
						'font-size': '30rpx',
						'border-bottom': '2rpx solid ' + theme.class_text_colour
					}"
				 :isOpen="false" @onValueChange="tabchange"></vgt-tab>
			</view>
		</u-sticky>
		<view v-if="!isclass" class="current0">
			<view class="swiper">
				<u-swiper :list="swiperList" name="url" @click="bannerGo"></u-swiper>
			</view>
			<view class="navbox">
				<u-grid :col="4" :border="false">
					<u-grid-item v-for="(v, k) in navList" :key="k" @click="navgo(v)">
						<image :src="v.icon" mode="" style="width: 100rpx;height: 100rpx;"></image>
						<view class="grid-text">{{ v.name }}</view>
					</u-grid-item>
				</u-grid>
			</view>
			<view class="column">
				<u-tabs :list="columnList" :is-scroll="false" :current="current2" bg-color="transparent" active-color="#FF0303"
				 font-size="32" inactive-color="#292929" @change="columnchange"></u-tabs>
			</view>
			<view class="swiper-box" style="z-index: 2;position: relative;">
				<view class="order">
					<view class="item" v-for="(item, index) in goodsList" :key="index" @click="goNext(4, item)">
						<view class="left">
							<image :src="item.imageInfo.imageList[0].url" mode="aspectFill"></image>
						</view>
						<view class="content">
							<view class="title u-line-2">
								<text class="cos" v-if="item.owner === 'g'">JD</text>
								{{ item.skuName }}
							</view>
							<view class="type u-line-1 gray u-flex u-row-between u-col-center">
								<view class="">
									京东价
									<text>￥{{ item.priceInfo.price }}</text>
								</view>
								<view class="">
									<text class="black">{{ item.comments | numberFormat }}</text>
									条评论 好评率
									<text class="black">{{ item.goodCommentsShare }}%</text>
								</view>
							</view>
							<view class="earn u-flex u-row-between u-col-center">
								<view class="coupon" v-if="item.couponInfo.couponList.length > 0">优惠券 ￥{{ item.couponInfo.couponList[0].discount }}</view>
								<view class="coupon" style="width: 230rpx;" v-if="islogin">购买返赚 ￥{{ item.commissionInfo.couponCommission.toFixed(2) }}</view>
							</view>
							<view class="bot u-flex u-row-between u-col-center">
								<view class="price">
									券后价：￥
									<text class="bold">{{ item.priceInfo.lowestCouponPrice }}</text>
								</view>
								<view class="" style="white-space:nowrap;height: 50rpx;line-height: 50rpx; border-radius: 40rpx;background-color: #fa3534;color: #FFFFFF;padding:0 20rpx;">
									分享赚￥{{ item.commissionInfo.share_commission.toFixed(2) }}
								</view>
								<!-- <u-button type="error" shape="circle" size="mini">马上抢</u-button> -->
							</view>
						</view>
					</view>
					<u-loadmore :status="status" />
				</view>
			</view>
		</view>
		<view v-else class="other">
			<!-- 	<view class="reclassifybox">
				<view class="reclassifyul">
					<scroll-view :scroll-x="true" :scroll-left="0">
						<text :class="[v.active ? 'reclassifyli  active' : 'reclassifyli']" v-for="(v, k) in reclassify" :key="k" @tap="changeclass(v.id, k)">{{ v.name }}</text>
					</scroll-view>
				</view>
			</view> -->
			<view class="bao">
				<view class="top u-flex u-row-between u-col-center">
					<view class="top_left">
						<text class="iconfont icon-fire"></text>
						<text>人气爆款</text>
					</view>
					<view class="top_right">大家都在买的热销好货</view>
				</view>
				<view class="swiperbox">
					<swiper class="swiper2" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="500">
						<swiper-item class="swiperitem u-flex u-row-between u-col-center">
							<block v-for="(v, k) in baoList" :key="k">
								<view class="baoli" v-if="k < 3" @click="goNext(4, v)">
									<image :src="v.imageInfo.imageList[0].url" mode="" style="width: 220rpx;height: 220rpx;"></image>
									<view class="praise">好评{{ v.comments }}+</view>
									<view class="title u-line-1">{{ v.skuName }}</view>
									<view class="pricebox u-flex u-row-between u-col-center">
										<text class="price">￥{{ v.priceInfo.lowestCouponPrice }}</text>
										<text class="fan u-flex">返￥{{ v.commissionInfo.couponCommission }}</text>
									</view>
								</view>
							</block>
						</swiper-item>
						<swiper-item class="swiperitem u-flex u-row-between u-col-center">
							<block v-for="(v, k) in baoList" :key="k">
								<view class="baoli" v-if="k > 2 && k < 6" @click="goNext(4, v)">
									<image :src="v.imageInfo.imageList[0].url" mode="" style="width: 220rpx;height: 220rpx;"></image>
									<view class="praise">好评{{ v.comments }}+</view>
									<view class="title u-line-1">{{ v.skuName }}</view>
									<view class="pricebox u-flex u-row-between u-col-center">
										<text class="price">￥{{ v.priceInfo.lowestCouponPrice }}</text>
										<text class="fan u-flex">返￥{{ v.commissionInfo.couponCommission }}</text>
									</view>
								</view>
							</block>
						</swiper-item>
						<swiper-item class="swiperitem u-flex u-row-between u-col-center">
							<block v-for="(v, k) in baoList" :key="k">
								<view class="baoli" v-if="k > 5 && k < 9" @click="goNext(4, v)">
									<image :src="v.imageInfo.imageList[0].url" mode="" style="width: 220rpx;height: 220rpx;"></image>
									<view class="praise">好评{{ v.comments }}+</view>
									<view class="title u-line-1">{{ v.skuName }}</view>
									<view class="pricebox u-flex u-row-between u-col-center">
										<text class="price">￥{{ v.priceInfo.lowestCouponPrice }}</text>
										<text class="fan u-flex">返￥{{ v.commissionInfo.couponCommission }}</text>
									</view>
								</view>
							</block>
						</swiper-item>
						<swiper-item class="swiperitem u-flex u-row-between u-col-center">
							<block v-for="(v, k) in baoList" :key="k">
								<view class="baoli" v-if="k > 8 && k < 12" @click="goNext(4, v)">
									<image :src="v.imageInfo.imageList[0].url" mode="" style="width: 220rpx;height: 220rpx;"></image>
									<view class="praise">好评{{ v.comments }}+</view>
									<view class="title u-line-1">{{ v.skuName }}</view>
									<view class="pricebox u-flex u-row-between u-col-center">
										<text class="price">￥{{ v.priceInfo.lowestCouponPrice }}</text>
										<text class="fan u-flex">返￥{{ v.commissionInfo.couponCommission }}</text>
									</view>
								</view>
							</block>
						</swiper-item>
					</swiper>
				</view>
			</view>
			<view class="goodsul">
				<view class="order">
					<view class="item" v-for="(item, index) in goodsList2" :key="index" @click="goNext(4, item)">
						<view class="left">
							<image :src="item.imageInfo.imageList[0].url" mode="aspectFill"></image>
						</view>
						<view class="content">
							<view class="title u-line-2">
								<text class="cos" v-if="item.owner === 'g'">JD</text>
								{{ item.skuName }}
							</view>
							<view class="type u-line-1 gray u-flex u-row-between u-col-center">
								<view class="">
									京东价
									<text>￥{{ item.priceInfo.price }}</text>
								</view>
								<view class="">
									<text class="black">{{ item.comments | numberFormat }}</text>
									条评论 好评率
									<text class="black">{{ item.goodCommentsShare }}%</text>
								</view>
							</view>
							<view class="earn u-flex u-row-between u-col-center">
								<view class="coupon" v-if="item.couponInfo.couponList.length > 0">优惠券 ￥{{ item.couponInfo.couponList[0].discount }}</view>
								<view class="coupon" style="width: 230rpx;" v-if="islogin">购买返赚 ￥{{ item.commissionInfo.couponCommission.toFixed(2) }}</view>
							</view>
							<view class="bot u-flex u-row-between u-col-center">
								<view class="price">
									券后价：￥
									<text class="bold">{{ item.priceInfo.lowestCouponPrice }}</text>
								</view>
								<view class="" style="white-space:nowrap;height: 50rpx;line-height: 50rpx; border-radius: 40rpx;background-color: #fa3534;color: #FFFFFF;padding:0 20rpx;">
									分享赚￥{{ item.commissionInfo.share_commission.toFixed(2) }}
								</view>
								<!-- <u-button type="error" shape="circle" size="mini">马上抢</u-button> -->
							</view>
						</view>
					</view>
					<u-loadmore :status="status" />
				</view>
			</view>
		</view>
		<u-modal v-model="isshow" content="您还未登录,登录后方可正常使用" :show-cancel-button="true" confirm-text="去登陆" confirm-color="#E76E4D"
		 @confirm="goNext(3)"></u-modal>
		<u-back-top :scroll-top="scrollTop" top="600"></u-back-top>
		<u-toast ref="uToast"></u-toast>
		<u-modal v-model="cutshow" :content="cutcont" title="是否搜索以下商品?" :show-cancel-button="true" confirm-text="搜索"
		 confirm-color="#E76E4D" @confirm="goNext(1, cutcont)"></u-modal>
	</view>
</template>

<script>
	import MyTransition from 'components/arm-liang-transition/arm-liang-transition';
	import vgtTab from '@/components/vgt-tab/vgt-tab.vue';
	export default {
		components: {
			MyTransition,
			vgtTab
		},
		data() {
			return {
				cutshow: false,
				cutcont: '',
				isup: 0,
				middlewareHeight: 88,
				opacity: 1,
				searchwidth: 710,
				searchtop: 82,
				tabsList2: [],
				scrollTop: 0,
				isclass: false,
				isshow: false,
				islogin: false,
				duration: 300,
				isfixed: true,
				isfixed2: true,
				navtop: 0,
				goodsList: [],
				goodsList2: [],
				swiperCurrent: 0,
				tabsHeight: 0,
				dx: 0,
				status: 'loadmore',
				columnList: [
					// {
					// 	name: '优粉验货'
					// },
					// {
					// 	name: '9.9优选'
					// },
					// {
					// 	name: '京选好评'
					// }
				],
				navList: [
					// {
					// 	name: '好券商品',
					// 	src: 'photo'
					// },
					// {
					// 	name: '精选卖场',
					// 	src: 'photo'
					// }
				],
				swiperList: [
					// {
					// 	url: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
					// 	title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					// },
					// {
					// 	url: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
					// 	title: '身无彩凤双飞翼，心有灵犀一点通'
					// }
				],
				tabsList: [{
					grade: 0,
					id: 0,
					name: '精选',
					parentId: 0
				}],
				current: 0,
				current2: 0,
				search: '',
				classList: [{
					grade: 0,
					id: 0,
					name: '精选',
					active: true,
					parentId: 0
				}],
				value: 'orange',
				// reclassify: [],
				indicatorDots: true,
				autoplay: false,
				interval: 2000,
				baoList: [],
				theme: {
					logo: '', //logo 地址
					master_title_colour: '', //主标题色号
					salve_title_colour: '', //副标题色号
					search_colour: '', //搜索框边框色号
					link_colour: '', //转链图表文字色号
					class_colour: '', //分类文字色号
					class_text_colour: '', //分类文字颜色
					background_url: '' //背景图地址
				},
				eliteId: '',
				JDpage: 1,
				baoPage: 1,
				classid: '',
				parentid: '',
				openId: '',
				code: '',
				oldcut: '',
				flag: true,
				my_code: uni.getStorageSync('jxuser') ? uni.getStorageSync('jxuser').my_code : '请先登录',
			};
		},
		watch: {
			current: function(val) {
				// console.log(val);
				if (val !== 0) {
					this.isclass = true;
				} else {
					this.isclass = false;
				}
				if (this.classList[val].id !== 0) {
					// this.getClassList(this.tabsList[val].id, this.tabsList[val].grade + 1);
					this.parentid = this.tabsList[val].id;
					this.classid = '';
					this.goodsList2 = [];
					this.doSearchGoods();
					this.getbaolist();
				}
			}
		},
		onLoad(option) {
			console.log(option)
			if (option.scene) {
				const scene = decodeURIComponent(option.scene);
				let arr = scene.split('&');
				this.skuId = arr[0];
				uni.setStorageSync('invitecode', arr[1]);
				//this.login();
			}
			this.getClassList();
		},
		onReachBottom() {
			this.status = 'loading';
			if (this.current === 0) {
				this.JDpage = ++this.JDpage;
				this.getJdGoods();
			} else {
				this.baoPage = ++this.baoPage;
				this.doSearchGoods();
			}
		},
		onPageScroll(obj) {
			this.scrollTop = obj.scrollTop;
		},
		onShow() {
			this.islogin = uni.getStorageSync('token') ? true : false;
			if (this.islogin) {
				let _that = this;
				uni.getClipboardData({
					success: function(res) {
						// console.log('剪切板内容', res.data);
						if (_that.oldcut !== res.data) {
							_that.cutshow = true;
						}
						_that.cutcont = res.data;
						_that.oldcut = res.data;
					},
					fail: function(err) {
						console.log('获取剪切板失败', err);
					}
				});
			}
			// this.flag = true
			if (this.flag) {
				if (uni.getStorageSync('jxuser').id) {
					this.goodsList = [];
					this.goodsList2 = [];
					this.doSearchGoods();
					this.getbaolist();
					this.getJdGoods();
					this.flag = false;
				}
			}
		},
		computed: {},
		onReady() {
			let that = this;
			let info = uni.createSelectorQuery().select('.navbars');
			info.boundingClientRect(function(data) {
				console.log('navtop', data);
				that.navtop = data.height;
			}).exec();
			this.getConfigInfo();
			this.getBannerList();
			this.getCategoryList();
			this.getTabClass();
		},
		methods: {
			onShareAppMessage(e) {
				return {
					title: '京东购物省钱，分享还能赚钱！',
					path: '/pages/home/index',
					imageUrl: '/static/imgs/share_img.png'
				};
			},
			//分享到朋友圈
			onShareTimeline(res) {
				return {
					title: '京东购物省钱，分享还能赚钱！',
					imageUrl: '/static/imgs/share_img.png'
				};
			},
			// //向后台更新信息
			updateUserInfo() {
				let _this = this;
				this.$u.api
					.doLogin({
						openId: this.openId
					})
					.then(res => {
						// console.log('登录成功', res);
						uni.setStorageSync('token', res.data.token);
						uni.setStorageSync('isloginout', true);
						uni.hideLoading();
						this.$refs.uToast.show({
							title: '登录成功!',
							type: 'success'
						});
						this.getUserInfo();
					})
					.catch(err => {
						console.log(err);
					});
			},
			getUserInfo() {
				this.$u.api
					.getUserInfo()
					.then(res => {
						// console.log(res);
						uni.setStorageSync('jxuser', res.data);
					})
					.catch(err => {
						console.log(err);
					});
			},
			tabchange(val) {
				// console.log(val);
				for (let i = 0; i < this.tabsList.length; i++) {
					if (this.tabsList[i].name === val) {
						this.current = i;
						this.classid = this.tabsList[i].id;
					}
				}
			},
			// changeclass(id, index) {
			// 	console.log('changeclass', id, index, this.reclassify);
			// 	this.classid = id;
			// 	this.reclassify[index].active = !this.reclassify[index].active;
			// 	for (let i in this.reclassify) {
			// 		if (i == index) {
			// 			this.reclassify[i].active = true;
			// 		} else {
			// 			this.reclassify[i].active = false;
			// 		}
			// 	}
			// 	this.goodsList2 = [];
			// 	this.doSearchGoods();
			// 	this.getbaolist();
			// },
			doSearchGoods() {
				this.$u.api
					.doSearchGoods({
						cid1: this.parentid,
						cid2: this.classid,
						pageSize: 20,
						fields: 'skuLabelInfo',
						pageIndex: this.baoPage,
						user_id: uni.getStorageSync('jxuser').id
					})
					.then(res => {
						this.goodsList2.push(...res.data);
						console.log('goodsList2', this.goodsList2);
						this.status = 'nomore';
					})
					.catch(err => {
						console.log(err);
					});
			},
			getbaolist() {
				this.$u.api
					.doSearchGoods({
						cid1: this.parentid,
						cid2: this.classid,
						fields: 'skuLabelInfo',
						sortName: 'inOrderCount30Days',
						pageSize: 12,
						pageIndex: 1,
						user_id: uni.getStorageSync('jxuser').id
					})
					.then(res => {
						// console.log('爆品', res);
						this.baoList = res.data;
					})
					.catch(err => {
						console.log(err);
					});
			},
			getJdGoods() {
				this.$u.api
					.getJdGoods({
						eliteId: this.eliteId,
						pageSize: 20, //每页数量
						pageIndex: this.JDpage,
						fields: 'skuLabelInfo',
						user_id: uni.getStorageSync('jxuser').id
					})
					.then(res => {
						// console.log(res);
						this.goodsList.push(...res.data);
						this.status = 'nomore';
					})
					.catch(err => {
						console.log(err);
					});
			},
			getConfigInfo() {
				this.$u.api
					.getConfigInfo()
					.then(res => {
						console.log(res);
						this.theme = res.data;
					})
					.catch(err => {
						console.log(err);
					});
			},
			getClassList(parentId, grade) {
				// console.log(parentId, grade);
				this.$u.api
					.getClassList({
						// parentId: parentId ? parentId : 0,
						// grade: grade ? grade : 0
					})
					.then(res => {
						console.log('分类', res);
						// if (parentId === undefined && grade === undefined) {
						let tablist = ['精选'];
						for (var i = 0; i < res.data.length; i++) {
							res.data[i].active = false;
							tablist.push(res.data[i].name);
						}
						this.tabsList2 = tablist;
						this.tabsList.push(...res.data);
						this.classList.push(...res.data);
						// }
						// else {
						// 	// this.reclassify = res.data;
						// 	this.classid = '';
						// 	this.goodsList2 = [];
						// 	this.doSearchGoods();
						// 	this.getbaolist();
						// 	// this.changeclass(res.data[0].id,0);
						// }
					})
					.catch(err => {
						console.log(err);
					});
			},
			getTabClass() {
				this.$u.api
					.getTabClass()
					.then(res => {
						console.log(res);
						this.columnList = res.data;
						this.eliteId = res.data[0].class_id;
						this.getJdGoods();
					})
					.catch(err => {
						console.log(err);
					});
			},
			// 主题栏
			getCategoryList() {
				this.$u.api
					.getCategoryList()
					.then(res => {
						console.log(res);
						this.navList = res.data;
					})
					.catch(err => {
						console.log(err);
					});
			},
			bannerGo(index) {
				if (this.islogin) {
					console.log(index, '---', this.swiperList[index]);
				} else {
					this.isshow = true;
				}
			},
			getBannerList() {
				this.$u.api
					.getBannerList()
					.then(res => {
						console.log(res);
						this.swiperList = res.data;
					})
					.catch(err => {
						console.log(err);
					});
			},
			goNext(val, item) {
				switch (val) {
					case 1:
						if (this.islogin) {
							if (item) {
								uni.navigateTo({
									url: '/pages/index/search/search?problem=' + item
								});
							} else {
								uni.navigateTo({
									url: '/pages/index/search/search'
								});
							}
						} else {
							this.isshow = true;
						}
						break;

					case 2:
						if (this.islogin) {
							uni.navigateTo({
								url: '/pages/index/conversionLink/conversionLink'
							});
						} else {
							this.isshow = true;
						}
						break;
					case 3:
						uni.switchTab({
							url: '/pages/my/index'
						});
						console.log('3');
						break;
					case 4:
						console.log(val, item);
						if (this.islogin) {
							uni.navigateTo({
								url: '/pages/other/goodsInfo/goodsInfo?item=' + encodeURIComponent(JSON.stringify(item)),
								animationType: 'pop-in',
								animationDuration: 300
							});
						} else {
							this.isshow = true;
						}
						break;
				}
			},
			fixed() {
				console.log('吸顶');
				this.isfixed = false;
				this.isfixed2 = false;
				setTimeout(() => {
					this.isfixed2 = true;
				}, 10);
			},
			unfixed() {
				console.log('离开吸顶');
				this.isfixed = true;
				this.isfixed2 = false;
			},
			navgo(item) {
				console.log(item);
				if (this.islogin) {
					uni.navigateTo({
						url: '/pages/index/columnGoods/columnGoods?item=' + encodeURIComponent(JSON.stringify(item))
					});
				} else {
					this.isshow = true;
				}
			},

			columnchange(index) {
				this.current2 = index;
				// console.log('swiper', this.columnList[index]);
				this.eliteId = this.columnList[index].class_id;
				this.goodsList = [];
				this.JDpage = 1;
				this.getJdGoods();
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				console.log(e);
			},
			closeDropdown() {
				this.$refs.uDropdown.close();
			}
		}
	};
</script>
<style>
	/* page {
	touch-action: none;
} */
</style>
<style lang="scss" scoped>
	.index {
		height: 100vh;
		background-color: #f7f7f8;

		// /deep/.u-navbar {
		// background: url(../../static/imgs/indexbg.png) !important;
		// }
		.bgbanner {
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 0;
		}

		.searchu {
			width: 100%;
			padding: 0 20rpx;
			transition: all 1000s linear;

			.seeks {
				position: absolute;
			}
		}

		.default {
			width: 580rpx;
			padding: 0 20rpx;
			transition: all 1000s linear;

			.title {
				padding: 0 10px 0 5px;
				font-size: 36rpx;
				color: #ffffff;
			}

			.title_tips {
				font-size: 28rpx;
				color: #ffffff;
			}

			/deep/.u-content {
				margin-right: 20rpx;
			}
		}

		.isfixed {
			transition: all 1000s linear;
			opacity: 0;
		}

		.seek {
			height: 68rpx;
			line-height: 68rpx;
			padding: 0 20rpx;

			// background-color: blue;
			/deep/.u-content {
				z-index: 9;
			}
		}

		.classbox {
			.jinxuan {
				width: 72rpx;
				height: 88rpx;
				line-height: 82rpx;
				font-size: 28rpx;
				text-align: center;
				margin-left: 20rpx;
				padding-bottom: 6rpx;
				position: relative;
				color: #ffffff;

				.activeline {
					position: absolute;
					bottom: 6rpx;
					left: 16rpx;
					width: 44rpx;
					background-color: #ffffff;
					height: 6rpx;
					border-radius: 6rpx;
				}
			}

			.slot-content {
				background-color: #ffffff;
				padding: 26rpx 32rpx;
			}

			.classdro {
				width: 72rpx;
				height: 88rpx;
				position: absolute;
				top: 0;
				right: 0;
			}

			.otherclass {
				display: flex;
				justify-content: space-around;
				align-items: center;
				flex-wrap: wrap;

				.item {
					// width: 122rpx;
					padding: 0 30rpx;
					height: 56rpx;
					line-height: 50rpx;
					color: #101010;
					margin-bottom: 20rpx;
					// margin-right: 15rpx;
					border-radius: 50rpx;
					border: 2rpx solid #ededed;
					background-color: #ededed;
				}

				.active {
					border: 2rpx solid #ff0303;
					color: #ff0303;
					background-color: #ffffff;
				}
			}

			/deep/.u-dropdown__content {
				width: 750rpx;
				left: -678rpx;
				top: 47px !important;
			}

			/deep/.u-icon__icon.uicon-arrow-down {
				display: none !important;
			}

			.tabsline {
				width: 500rpx;

				/deep/.u-tabs {
					background-color: transparent !important;
				}
			}
		}

		.swiper {
			padding: 0 20rpx;
		}

		.navbox {
			margin: 20rpx 20rpx;
			background-color: #ffffff;
			border-radius: 16rpx;
			overflow: hidden;
		}

		.column {
			touch-action: none;

			/deep/.u-tabs-item {
				font-weight: 600 !important;
			}
		}

		.swiper-box {
			height: 600rpx;
			padding: 20rpx;

			.item {
				display: flex;
				padding: 20rpx;
				background-color: #ffffff;

				.left {
					margin-right: 13rpx;

					image {
						width: 230rpx;
						height: 250rpx;
						border-radius: 12rpx;
					}
				}

				.content {

					// width: 382rpx ;
					.title {
						font-size: 28rpx;
						line-height: 50rpx;

						.cos {
							// width: 56rpx;
							// height: 34rpx;
							color: #ffffff;
							font-weight: 200;
							font-size: 28rpx;
							text-align: center;
							padding: 0 12rpx;
							background-color: #ff0303;
							border-radius: 8rpx;
							margin-right: 6rpx;
						}
					}

					.type {
						margin: 10rpx 0;
						font-size: 24rpx;
					}

					.earn {
						margin: 10rpx 0;

						.coupon {
							width: 180rpx;
							height: 40rpx;
							line-height: 40rpx;
							color: #ff0303;
							text-align: center;
							background-color: #ffe5e5;
							border-radius: 50rpx;
							font-size: 24rpx;
						}
					}

					.bot {

						// margin-top: 24rpx;
						.price {
							width: 226rpx;
							color: #ff0303;
						}
					}
				}
			}
		}

		.current0 {
			margin-top: 10rpx;
			min-height: 100vh;
		}

		.other {
			position: relative;

			// .reclassifybox {
			// 	background-color: #ffffff;
			// 	.reclassifyul {
			// 		height: 84rpx;
			// 		line-height: 84rpx;
			// 		overflow-x: auto;
			// 		white-space: nowrap;
			// 		padding: 0 12rpx;
			// 		.reclassifyli {
			// 			background-color: #ededed;
			// 			color: #292929;
			// 			font-size: 28rpx;
			// 			border-radius: 40rpx;
			// 			padding: 0 30rpx;
			// 			margin-right: 14rpx;
			// 		}
			// 		.active {
			// 			background-color: #ffffff;
			// 			border: 2rpx solid #ff0303;
			// 			color: #ff0303;
			// 		}
			// 	}
			// }
			.bao {
				padding: 16rpx;
				margin: 20rpx;
				border-radius: 16rpx;
				background-color: #ffffff;

				.top {
					width: 100%;
					color: #f40707;
					margin-bottom: 14rpx;

					.top_left {}

					.top_right {}
				}

				.swiperbox {
					.swiper2 {
						height: 384rpx;
					}

					.swiperitem {
						.baoli {
							image {
								width: 220rpx;
								height: 200rpx;
							}

							.praise {
								width: 220rpx;
								background-color: rgba(245, 34, 45, 0.2);
								color: rgb(245, 34, 45);
								font-size: 24rpx;
								text-align: center;
								border: 1px solid rgba(255, 120, 117, 0.67);
							}

							.title {
								width: 220rpx;
								font-size: 24rpx;
								color: #101010;
								font-weight: 600;
							}

							.pricebox {
								width: 220rpx;

								.price {
									font-size: 26rpx;
									color: #f40707;
									font-weight: 600;
								}

								.fan {
									font-size: 24rpx;
									color: rgba(255, 3, 3, 0.79);
									background-color: rgba(245, 34, 45, 0.2);
									padding: 0 6rpx;
									border-radius: 8rpx;
									white-space: nowrap;
								}
							}
						}
					}
				}
			}

			.goodsul {
				margin: 0 20rpx;

				.item {
					display: flex;
					padding: 20rpx;
					background-color: #ffffff;
					margin-top: 20rpx;

					.left {
						margin-right: 13rpx;

						image {
							width: 250rpx;
							height: 250rpx;
							border-radius: 12rpx;
						}
					}

					.content {

						// width: 382rpx ;
						.title {
							font-size: 28rpx;
							line-height: 50rpx;

							.cos {
								// width: 56rpx;
								// height: 34rpx;
								color: #ffffff;
								font-weight: 200;
								font-size: 28rpx;
								text-align: center;
								padding: 0 12rpx;
								background-color: #ff0303;
								border-radius: 8rpx;
								margin-right: 6rpx;
							}
						}

						.type {
							margin: 10rpx 0;
							font-size: 24rpx;
						}

						.earn {
							margin: 10rpx 0;

							.coupon {
								width: 180rpx;
								height: 40rpx;
								line-height: 40rpx;
								color: #ff0303;
								text-align: center;
								background-color: #ffe5e5;
								border-radius: 50rpx;
								font-size: 24rpx;
							}
						}

						.bot {

							// margin-top: 24rpx;
							.price {
								width: 226rpx;
								color: #ff0303;
							}
						}
					}
				}
			}
		}
	}
</style>
